<template>
  <BorderBox8 style="width: 100%; height: 100%">
    <div class="content">
      <div>
        <h3
          style="
            margin-bottom: 0px;
            padding-bottom: 0px;
            color: #67e0e3;
            font-size: 24px;
          "
        >
          Monthly Scrap Failure Mode
        </h3>
      </div>

      <table style="width: 100%">
        <thead style="background-color: #4e99dc">
          <!-- <th>序号</th>
          <th>涂布序列号</th> -->
          <th>Failure Mode</th>
          <th>Failure Qty</th>
          <th>Failure Rate</th>
        </thead>
        <tbody
          v-for="(item, index) in tableList.slice(0, 6)"
          :key="index"
          :class="{ 'striped-row': index % 2 === 0 }"
          style="font-size: 18px"
        >
          <tr>
            <!-- <td class="center-td" style="color: #67e0e3">{{ item.id }}</td>
            <td class="center-td" style="color: #67e0e3">{{ item.sn }}</td> -->
            <td class="center-td" style="color: #67e0e3">{{ item.type }}</td>
            <td class="center-td" style="color: #67e0e3">{{ item.time }}</td>
            <td class="center-td" style="color: #67e0e3">{{ item.length }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </BorderBox8>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { BorderBox8 } from "@kjgl77/datav-vue3";

const tableList = ref([
  { id: 1, sn: "0001", type: "脱胶-A", time: "77", length: "13.50%" },
  { id: 2, sn: "0002", type: "褶皱-F", time: "29", length: "5.08%" },
  { id: 3, sn: "0003", type: "孔洞-L", time: "20", length: "3.50%" },
  { id: 4, sn: "0004", type: "气泡-LB", time: "25", length: "4.38%" },
  { id: 5, sn: "0005", type: "涂布宽幅-NB", time: "43", length: "7.54%" },
  { id: 6, sn: "0006", type: "线条-S", time: "306", length: "53.68%" },
  { id: 7, sn: "0007", type: "污渍-SCH", time: "61", length: "10.7%" },
  { id: 8, sn: "0008", type: "停机位置-ST", time: "7", length: "1.22%" },
  { id: 9, sn: "0009", type: "气道-T", time: "2", length: "0.35%" },
]);
const rotateData = () => {
  const temp = tableList.value.slice(1); // 除了第一个元素外，其他元素组成一个新数组
  temp.push(tableList.value[0]); // 将第一个元素添加到新数组的末尾
  tableList.value = temp; // 更新tableData，实现轮播效果
};
onMounted(() => {
  setInterval(rotateData, 1000); // 每秒更新一次
});
</script>
<style scoped lang="less">
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// .tableHeader {
//   width: 50px;
// }
.center-td {
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}
.striped-row {
  background-color: #c9c7c781; /* 浅灰色 */
}
/* 偶数行的颜色 */
</style>
